<template>
	<view class="identity-wrap">
		<view class="custom-page-head">
			<uni-nav-bar
				class="uni-nav-bar-wrap" 
				status-bar 
				fixed
				leftIcon="arrowleft"
				rightText="确定"
				title="身份选择"
				@clickLeft="clickLeft"
				@clickRight="clickRight"
			>
			</uni-nav-bar>
		</view>
		<view class="current-wrap">
			<view>当前体系</view>
			<view>体系：{{currentSysName || '(空)'}}</view>
			<view>组织：{{currentOrgName || '(空)'}}</view>			
		</view>
		<view class="choose-button">
			<button type="primary" @click="chooseIdentity">选择一个身份</button>
		</view>
		<!-- popup-picker -->
		<lb-picker 
			ref="LbPickerREF" 
			:list="orgAndSysList" 
			:props="myProps"
			mode="multiSelector"
			:level="2"
			@confirm="handleConfirm">
			</lb-picker>
	</view>
</template>

<script>
	import serverConfig from '@/static/serverConfig.js'
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import {mapActions, mapGetters} from 'vuex'
	export default {
		components: {uniNavBar, LbPicker},
		data () {
			return {
				myProps: {
					label: 'name',
					value: 'id',
					children: 'children'
				},
				orgAndSysList: [],
				currentSysId: '',
				currentOrgId: '',
				currentOrgName: '',
				currentSysName: ''
			}
		},
		onLoad(option) {
			this.getOrgAndSySList()
			
		},
		computed: {
			...mapGetters(['hasLogin'])
		},
		methods: {
			...mapActions(['setSysId', 'setOrgId', 'setHasLogin']),
			clickLeft() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			},
			clickRight() {
				if (this.currentSysId && this.currentOrgId) {
					uni.showToast({
						icon: 'success',
						title: '登录成功',
						position: 'bottom'
					})
					this.setHasLogin(true)
					this.setSysId(this.currentSysId)
					this.setOrgId(this.currentOrgId)
					
					uni.switchTab({
						url: `../tabbar/work/work?sysId=${this.currentSysId}&orgId=${this.currentOrgId}`
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '组织或体系选择有误!',
						position: 'bottom'
					})
				}
			},
			chooseIdentity() {
				this.$refs.LbPickerREF.show()
			},
			/**
			 * @description 选择体系和组织
			 */
			getOrgAndSySList() {
				this.$request.ygstConstraManageManagerLoginListGet().then(res => {				
					this.orgAndSysList = res
					return this.getOrgAndSySListFunc(this.orgAndSysList)
				})
			},
			getOrgAndSySListFunc(list) {
				// 后端返回的格式化数据 使用正则进行替换
				let result = JSON.parse(
									JSON.stringify(list)
									.replace(/sysId/g, 'id')
									.replace(/sysName/g, 'name')
									.replace(/orgId/g, 'id')
									.replace(/orgName/g, 'name')
									.replace(/orgList/g, 'children')
								)
								console.log('result', result)
				this.orgAndSysList = result			
				return result
			},
			handleConfirm(e) {
				let [currentSysId, currentOrgId] = e.value
				let [{name: currentSysName}, {name: currentOrgName}] = e.item
				this.currentSysId = currentSysId
				this.currentOrgId = currentOrgId
				this.currentSysName = currentSysName
				this.currentOrgName = currentOrgName
				this.setSysId(this.currentSysId)
				this.setOrgId(this.currentOrgId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.current-wrap {
		box-sizing: border-box;
		padding: 20rpx 36rpx;
		font-size: 40rpx;
	}
	.choose-button {
		box-sizing: border-box;
		padding: 20rpx 36rpx;
	}
</style>
